<template>
	<view class="page">
		<view class="container">
			<!-- 固定区域 -->
			<view class="header">
				<view class="header-top">
					<uni-icons type="more-filled" size="24" color="#333333" />
					<uni-icons type="compose" size="24" color="#333333" />
				</view>
				<view class="user-info">
					<image class="avatar" :src="userAvatar" mode="aspectFill" />
					<text class="nickname">小明</text>
					<view class="intro">
						<text class="intro-text">这里是我的个人简介，让我们一起分享养宠生活的快乐时光~</text>
						<uni-icons type="compose" size="16" color="#666666" />
					</view>
				</view>
			</view>
			<!-- 滚动区域 -->
			<scroll-view class="content" scroll-y>
				<!-- 我的宠物 -->
				<view class="section pets-section">
					<view class="section-header">
						<text class="section-title">我的宠物</text>
						<text class="more">查看全部</text>
					</view>
					<scroll-view class="pets-list" scroll-x>
						<view class="pet-item" v-for="(pet, index) in pets" :key="index">
							<image class="pet-avatar" :src="pet.avatar" mode="aspectFill" />
							<text class="pet-name">{{pet.name}}</text>
						</view>
					</scroll-view>
				</view>
				<!-- 我的喜欢 -->
				<view class="section likes-section">
					<view class="section-header">
						<text class="section-title">我的喜欢</text>
						<text class="more">查看全部</text>
					</view>
					<scroll-view class="likes-list" scroll-x>
						<view class="like-item" v-for="(like, index) in likes" :key="index">
							<image class="like-image" :src="like.image" mode="aspectFill" />
							<view class="like-info">
								<text class="like-name">{{like.name}}</text>
								<text class="like-breed">{{like.breed}}</text>
								<text class="like-age">{{like.age}}</text>
								<!-- <text class="like-location">{{like.location}}</text> -->
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 记录时刻 -->
				<view class="section moments-section">
					<view class="section-header">
						<text class="section-title">记录时刻</text>
						<text class="more">查看全部</text>
					</view>
					<view class="moments-list">
						<view class="moment-item" v-for="(moment, index) in moments" :key="index">
							<image class="moment-image" :src="moment.image" mode="aspectFill" />
							<text class="moment-text">{{moment.text}}</text>
							<text class="moment-time">{{moment.time}}</text>
						</view>
					</view>
				</view>
				<!-- 我的收藏 -->
				<view class="section collections-section">
					<view class="section-header">
						<text class="section-title">我的收藏</text>
						<text class="more">查看全部</text>
					</view>
					<view class="collections-grid">
						<view class="collection-item" v-for="(collection, index) in collections" :key="index">
							<image class="collection-image" :src="collection.image" mode="aspectFill" />
							<text class="collection-title">{{collection.title}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 底部导航栏 -->
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { ref } from 'vue';
	const userAvatar = 'https://ai-public.mastergo.com/ai/img_res/b4fc6433b90c984e94a723bfabc80f8a.jpg';
	const pets = ref([
		{
			name: '可可',
			avatar: 'https://ai-public.mastergo.com/ai/img_res/49815edf0c294c5af710ce40048bf82e.jpg'
		},
		{
			name: '奶糖',
			avatar: 'https://ai-public.mastergo.com/ai/img_res/5e014ea678b38e304b9e1b493a082dc9.jpg'
		}
	]);
	const likes = ref([
		{
			name: '布丁',
			breed: '柯基',
			age: '2岁',
			location: '上海',
			image: 'https://ai-public.mastergo.com/ai/img_res/1f0ff08d7c74d7045750dcb43479b18a.jpg'
		},
		{
			name: '小灰',
			breed: '英短',
			age: '1岁',
			location: '北京',
			image: 'https://ai-public.mastergo.com/ai/img_res/9aef6b0aa91e5597558c403084259462.jpg'
		}
	]);
	const moments = ref([
		{
			text: '今天和可可去公园玩耍，真开心！',
			time: '1小时前',
			image: 'https://ai-public.mastergo.com/ai/img_res/90eeff66bb8f305e129f61a96daabbb1.jpg'
		},
		{
			text: '奶糖第一次吃新口味的猫粮，表情好可爱',
			time: '3小时前',
			image: 'https://ai-public.mastergo.com/ai/img_res/21495ae07f2842306536bb2f9e81bb41.jpg'
		}
	]);
	const collections = ref([
		{
			title: '宠物美容小技巧',
			image: 'https://ai-public.mastergo.com/ai/img_res/b62b7b4bef14f55bfa3c4f75c433ac72.jpg'
		},
		{
			title: '猫咪健康指南',
			image: 'https://ai-public.mastergo.com/ai/img_res/2aa273aeb794c6f1a8a4c2b8600b6800.jpg'
		}
	]);
</script>
<style>
	page {
		height: 100%;
	}

	.page {
		height: 100%;
		background-color: #F8F9FA;
	}

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.header {
		flex-shrink: 0;
		padding: 40rpx 32rpx;
		background-color: #FFFFFF;
		border-radius: 0 0 32rpx 32rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.header-top {
		display: flex;
		justify-content: space-between;
		margin-bottom: 32rpx;
	}

	.user-info {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 80rpx;
		margin-bottom: 16rpx;
	}

	.nickname {
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		margin-bottom: 16rpx;
	}

	.intro {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.intro-text {
		font-size: 28rpx;
		color: #666666;
		line-height: 40rpx;
	}

	.content {
		flex: 1;
		overflow: auto;
	}

	.section {
		margin: 32rpx;
		padding: 32rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
	}

	.more {
		font-size: 28rpx;
		color: #666666;
	}

	.pets-list {
		white-space: nowrap;
	}

	.pet-item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		margin-right: 24rpx;
	}

	.pet-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-bottom: 8rpx;
	}

	.pet-name {
		font-size: 24rpx;
		color: #333333;
	}

	.likes-list {
		white-space: nowrap;
	}

	.like-item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		margin-right: 24rpx;
	}

	.like-image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 16rpx;
		margin-bottom: 8rpx;
	}

	.like-info {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.like-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
		margin-bottom: 4rpx;
	}

	.like-breed,
	.like-age,
	.like-location {
		font-size: 24rpx;
		color: #666666;
		margin-bottom: 4rpx;
		line-height: 32rpx;
	}

	.like-location {
		margin-bottom: 0;
	}

	.moments-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.moment-item {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.moment-image {
		width: 100%;
		height: 320rpx;
		border-radius: 16rpx;
	}

	.moment-text {
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.moment-time {
		font-size: 24rpx;
		color: #999999;
	}

	.collections-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24rpx;
	}

	.collection-item {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.collection-image {
		width: 100%;
		height: 320rpx;
		border-radius: 16rpx;
	}

	.collection-title {
		font-size: 28rpx;
		color: #333333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tab-bar {
		flex-shrink: 0;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;
		border-top: 2rpx solid #EEEEEE;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4rpx;
	}

	.tab-text {
		font-size: 24rpx;
		color: #666666;
	}

	.tab-text.active {
		color: #FF6B6B;
	}
</style>